<template>
  <div :class="classes" ref="cell">
    <template v-if="renderType === 'index'"><span>{{ naturalIndex + 1 }}</span></template>
    <template v-if="renderType === 'selection'">
      <oolongCheckbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect"
                      :disabled="disabled"></oolongCheckbox>
    </template>
    <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
    <template v-if="renderType === 'normal'"><span>{{ row[column.key] }}</span></template>
    <template v-if="renderType === 'expand' && !row._disableExpand">
      <div :class="expandCls" @click="toggleExpand">
        <oolongIcon type="ios-arrow-right"></oolongIcon>
      </div>
    </template>
    <expandCell
      v-if="renderType === 'render'"
      :row="row"
      :column="column"
      :index="index"
      :render="column.render"></expandCell>
  </div>
</template>
<script>
import expandCell from './expand';
import oolongIcon from '../icon/oolong-icon.vue';
import oolongCheckbox from '../checkbox/oolong-checkbox.vue';

export default {
  name: 'oolongTableCell',
  components: {expandCell, oolongIcon, oolongCheckbox},
  props: {
    prefixCls: String,
    row: Object,
    column: Object,
    naturalIndex: Number, // index of rebuildData
    index: Number, // _index of data
    checked: Boolean,
    disabled: Boolean,
    expanded: Boolean,
    fixed: {
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    return {
      renderType: '',
      uid: -1,
      context: this.$parent.$parent.$parent.currentContext
    };
  },
  computed: {
    classes() {
      return [
        `${this.prefixCls}-cell`,
        {
          [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
          [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
          [`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
        }
      ];
    },
    expandCls() {
      return [
        `${this.prefixCls}-cell-expand`,
        {
          [`${this.prefixCls}-cell-expand-expanded`]: this.expanded
        }
      ];
    }
  },
  methods: {
    toggleSelect() {
      this.$parent.$parent.$parent.toggleSelect(this.index);
    },
    toggleExpand() {
      this.$parent.$parent.$parent.toggleExpand(this.index);
    },
    handleClick() {
      // 放置 Checkbox 冒泡
    }
  },
  created() {
    if (this.column.type === 'index') {
      this.renderType = 'index';
    } else if (this.column.type === 'selection') {
      this.renderType = 'selection';
    } else if (this.column.type === 'html') {
      this.renderType = 'html';
    } else if (this.column.type === 'expand') {
      this.renderType = 'expand';
    } else if (this.column.render) {
      this.renderType = 'render';
    } else {
      this.renderType = 'normal';
    }
  }
};
</script>
